<template>
    <!-- 顶部导航 -->
    <van-nav-bar title="基本资料" left-text="返回" left-arrow @click-left="onClickLeft" />

    <!-- 用户头像 -->
    <div class="user">
        <div class="user-image">
            <img :src="LoginUser.avatar_text" alt="">
        </div>
    </div>

    <!-- 表单 -->
    <VanForm @submit="onProfile">

        <!-- 手机号 -->
        <van-field 
            v-model="LoginUser.mobile" 
            name="mobile"
            label="手机号"
            placeholder="用户名"
            label-align="right"
            label-width="4.5em"
            readonly
            colon
        />

        <!-- 昵称 -->
        <van-field 
            v-model="LoginUser.nickname" 
            name="nickname"
            label="昵称"
            placeholder="请输入昵称"
            :rules="[{ required: true, message: '请填写昵称' }]"
            label-align="right"
            label-width="4.5em"
            colon
        />

        <!-- 邮箱 -->
        <van-field 
            v-model="LoginUser.email" 
            name="email"
            label="邮箱"
            placeholder="请输入邮箱"
            :rules="[{ required: true, message: '请填写邮箱' }]"
            label-align="right"
            label-width="4.5em"
            colon
        />
        
        <!-- 密码 -->
        <van-field 
            name="password"
            type="password"
            v-model="LoginUser.password"
            label="密码"
            placeholder="密码为空不修改密码"
            label-align="right"
            label-width="4.5em"
            colon
        />

        <!-- 性别 -->
        <van-field
            name="gender"
            label="性别"
            label-align="right"
            label-width="4.5em"
            colon
        >
            <template #input>
                <van-radio-group v-model="LoginUser.gender" direction="horizontal">
                <van-radio name="0">保密</van-radio>
                <van-radio name="1">男</van-radio>
                <van-radio name="2">女</van-radio>
                </van-radio-group>
            </template>
        </van-field>

        <!-- 地区 -->
        <van-field
            v-model="LoginUser.region_text"
            is-link
            readonly
            name="region"
            label="地区选择"
            placeholder="点击选择城市"
            @click="showArea = true"
            label-align="right"
            label-width="4.5em"
            colon
        />

        <!-- 头像 -->
        <van-field
            name="avatar"
            label="头像上传"
            label-align="right"
            label-width="4.5em"
            colon
        >
            <template #input>
                <van-uploader
                    v-model="avatar"
                    :max-count="1"
                />
            </template>
        </van-field>

        <!-- 邀请码 -->
        <van-field 
            v-model="LoginUser.invitecode"
            label="邀请码"
            placeholder="邀请码"
            label-align="right"
            label-width="4.5em"
            readonly
            colon
        />

        <div style="margin: 16px;">
            <van-button round block type="primary" native-type="submit">
            提交
            </van-button>
        </div>

    </VanForm>

    <!-- 地区弹出层 -->
    <van-popup v-model:show="showArea" position="bottom">
        <van-area
            :area-list="areaList"
            @confirm="onConfirm"
            @cancel="showArea = false"
            v-model="LoginUser.district"
        />
    </van-popup>

</template>
<script>
import { areaList } from '@vant/area-data';
import {showNotify} from 'vant'
export default {
    created() {
        this.avatar = [
            { url: this.LoginUser.avatar_text,isImage: true },
        ]
    },
    data() {
        return {
            LoginUser: this.$cookies.get('LoginAuth') ? this.$cookies.get('LoginAuth') : {},
            avatar:[],
            showArea:false,
            areaList:areaList,
            regionCode:null,
            password:''
        }
    },
    methods: {
        onClickLeft() {
            this.$router.push('/user/base/index')
        },
        async onProfile(value) {
            // 邮箱正则
            let EmailReg = /^[a-z0-9]+([._\\-]*[a-z0-9])*@([a-z0-9]+[-a-z0-9]*[a-z0-9]+.){1,63}[a-z0-9]+$/;
            
            if(!EmailReg.test(value.email))
            {
                showNotify({
                    type:'warning',
                    message:'邮箱格式有误'
                })

                return false
            }

            // 封装更新数据
            let data = {
                busid:this.LoginUser.id,
                nickname:value.nickname,
                email:value.email,
                gender:value.gender,
            }

            // 密码
            if(value.password)
            {
                data.password = value.password
            }

            // 地区
            if(this.regionCode)
            {
                data.code = this.regionCode
            }

            // 头像
            let avatarFile = value.avatar[0].file ? value.avatar[0].file : {}

            if(avatarFile || JSON.stringify(avatarFile) != '{}')
            {
                data.avatar = avatarFile
            }

            // 发起请求
            let result = await this.$api.profile(data)

            if(result.code === 1)
            {
                showNotify({
                    type:'success',
                    message:result.msg,
                    onClose:() => {

                        // 把返回用户信息存到cookie
                        this.$cookies.set('LoginAuth',result.data)

                        this.$router.push('/user/base/index')
                    }
                })

                return false
            }else{
                showNotify({
                    type:'warning',
                    message:result.msg
                })

                return false
            }
        },
        onConfirm(value)
        {
            // 关闭弹窗
            this.showArea = false

            let [province,city,district] = value.selectedOptions

            let regionText = ''
            let regionCode = null;

            if(province)
            {
                regionText = province.text + '-'
                regionCode = province.value
            }

            if(city)
            {
                regionText += city.text + '-'
                regionCode = city.value
            }

            if(district)
            {
                regionText += district.text
                regionCode = district.value
            }

            this.LoginUser.region_text = regionText
            this.regionCode = regionCode
        }
    },
}
</script>

<style>
.user {
    padding: 50px;
    background: #fff;
    border-bottom: 1px solid #ccc;
    box-shadow: 0 0 10px #ccc;
    margin-bottom: 5px;
}

.user .user-image {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    overflow: hidden;
    margin: 0 auto;
}

.user img {
    width: 100%;
    height: 100%;
}
</style>